<template>
  <div class="myFavorite">

    <div class="myFavorite" v-if="account.profile.listOption">
      <div class="left" v-if="right_visible">
        <h3>猜你喜欢: </h3>
        <p style="font-size: 16px">从这里挑选更多你喜欢的商品吧</p>

        <ul>
          <li v-for="(product, index) in products">
            <router-link :to=" {name:'product',params:{name:product.productId}}">
              <a>
                {{product.name}}
              </a>
            </router-link>
          </li>
        </ul>

      </div>
      <div class="right" v-if="right_visible">
        <input value=">" class="button" id="close" @click="closeRight">
      </div>
      <div class="center" v-if="left_visible">
        <input value="<" class="button" id="open" @click="closeLeft">
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "myFavorite"
}
</script>

<script setup>
import {onMounted, reactive, ref} from "vue";
import api from "../api";

const account = reactive({
  username: '',
  profile: {
    listOption: null,
  }
})

const products = reactive([])

// account.username = 'j2ee'//测试用
const accountJson = sessionStorage.getItem('user')
const account1 = JSON.parse(accountJson)
if(account1){
  account.username = account1.username
  account.profile.listOption = account1.profile.listOption
}


const right_visible = ref(true)
const left_visible = ref(false)

const closeRight = () => {
  right_visible.value = false
  left_visible.value = true
}

const closeLeft = () => {
  right_visible.value = true
  left_visible.value = false
}

onMounted(() => {
  getData()
})
const getData = () => {
  console.log(account.username)
  console.log(account.profile.listOption)
  //初始化页面
  if(account.profile.listOption){
    api.getFavoriteByName(account.username).then(
        res => {
          products.splice(0, products.length)//清空旧数据
          products.push(...res.data.data)//update,from date results
        }
    )
  }
}
</script>

<style scoped>
.myFavorite {
  text-align: left;
  z-index: 3;
  position: fixed;
  top: 150px;
  right: 20px;
}

.left {
  float: left;
  background-color: rgba(237, 196, 158, 0.9);
  padding: 2ch 0 2ch 2.5ch;
  border-radius: 40px 0 40px 40px;
}

.right {
  float: right;
  background-color: rgba(237, 196, 158, 0.9);
  border-radius: 0 10px 10px 0;
}

.button {
  text-align: center;
  background-color: transparent;
  border-style: none;
  width: 20px;
  height: 20px;
  font-weight: 700;
}

.button:focus {
  border-radius: 10px;
  outline-color: rgb(233, 164, 101);
  color: rgb(233, 164, 101);
}

.center {
  float: right;
  background-color: rgba(237, 196, 158, 0.9);
  border-radius: 10px;
}
</style>